<template>
  <div class="progress_box">
    <div class="progressBox" :style="{ background: getStyle() }"></div>
    <span class="jindu">{{ percentage + "%" }}</span>
  </div>
</template>

<script>
export default {
  name: "jsbos-progress",
  props: {
    percentage: {
      type: Number,
      default: 0,
    },
    colorStart: {
      type: String,
      default: "#9dc2ff",
    },
    colorEnd: {
      type: String,
      default: "#ccc",
    },
  },
  data() {
    return {};
  },
  watch: {},
  mounted() {},
  methods: {
    getStyle() {
      let style_code = "";
      if (this.percentage < 100 && this.percentage > 0) {
        style_code = `linear-gradient(90deg, ${this.colorStart} 0%, ${
          this.colorStart
        } ${this.percentage - 2}%,rgb(231,231,231) ${this.percentage}%)`;
      } else if (this.percentage >= 100) {
        style_code = `${this.colorStart}`;
      } else if (this.percentage <= 0) {
        // style_code = `none`;
        style_code = `rgb(231,231,231)`;
      }

      console.log("ssssssssssssssssssssssssss", style_code);
      return style_code;
    },
  },
};
</script>
<style lang="scss" scoped>
.progress_box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progressBox {
  width: 100%;
  height: 94%;
  margin-right: 5px;
  border-radius: 2px;
}
.jindu {
  display: inline-block;
  min-width: 35px;
}
</style>
